﻿<html>

<head>
  <meta charset="utf-8" />
  <title>targetinfo_mini</title>
  <link rel="stylesheet" href="css/targetinfo.css">
  <style>
    .content {
      position: absolute;
      right: 0px;
      padding: 10px;
    }

    .item {
      color: #E2EBF5;
      text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
      font-weight: 300;
      text-align: right;
      overflow: hidden;
    }
  </style>
</head>

<body id="enmity" v-class="resize-handle: !locked">

  <!-- outer -->
  <div class="outer {{hide ? 'hide' : ''}}">
    <!-- innner -->
    <div v-if="updated" class="inner {{target.type != 2 ? 'hide' : ''}}">

      <!-- Items -->
      <div id="items" class="content">
        <div class="background"></div>
        <div class="item">
          <span>{{target.HPPercent}}%</span>
          <span v-if="target.TimeToDeath"> ({{target.TimeToDeath}})</span>
        </div>
        <div class="item">{{myEntry.RelativeEnmityString}}</div>
        <div class="item">{{target.Distance}}m</div>
      </div>
      <!-- end of Items -->
      
    </div>
    <!-- end of inner -->
  </div>
  <!-- end of outer -->

  <!-- load js -->
  <script src="js/vue-0.12.7.min.js"></script>
  <script src="js/enmity.js"></script>

  <!-- FOR DEMO/DEBUG USE -->
  <!--
  <script src="js/demodata.js"></script>
  <script>Demo(enmity);</script>
  -->
</body>

</html>